<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*margin: 1.margin-left 2.margin-right 3.margin-top 4.margin-bottom 5.margin(复合)
          复合属性的规则和padding一致。*/
        /*注意事项：   1、一个元素的子元素，其盒子是基于父元素content计算的。
                      =》父元素content:400*400，则子元素的位置是相当于这400*400的规格的。
                      2. margin是可以为负数的，此数如果两个元素特别近，可能发生覆盖
                      3.margin的值可以设置为auto,含义是尽可能的离xx方向远，如果一个块级元素的左右margin均
                      设置为auto，则可实现元素的居中显示。
        */
        /*
         margin塌陷问题：第一个子元素的margin-top会作用在父元素上，最后一个子元素的margin-bottom会
                        作用在父元素上

        解决方法：  1.设置不为0的padding  2.设置不为0的border   3.为父元素添加 overflow:hidden
                   第三种解决方案最好
        */

        /*
        margin合并： margin上面兄弟的下边距和下面兄弟的上边距会进行合并，可以理解为，
                    下面的兄弟的margin-top是以content为参考的，而左右是以盒子为参考的。
        */
        .p1{
            height:400px;
            width:400px;
            background-color: grey;
            overflow: hidden;  /*如果不加，则p2添加的top会变成p1的top变为50px*/
        }
        .p2{
            height:100px;
            width:100px;
            margin-top:50px;
            background-color: orange;
        }
        .p3{
            height:100px;
            width:100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="p1">
        <div class="p2">test1</div>
        <div class="p3">test2</div>
    </div>
</body>
</html>